…teractive cost charts

- Size the master-detail panel to the Angular reference: 420x240 carousel,
  details table at two-thirds width with separate label/value columns.
- Make the detail pane fill the row width (force the tabs inner/body and the
  detail host to 100%) and remove the horizontal scrollbar caused by widening
  the hierarchical indent; trim main-grid columns to leave room for the expander.
- Make the tabs height content-driven instead of a fixed 520px.
- Fix the Trip History driver column not rendering until interaction, and the
  flicker when switching tabs, by lazy-rendering each tab's grid/chart once and
  keeping it mounted.
- Cost/Utilization charts: light axis, label and title colors for dark mode,
  light pie outer labels, a 2023/2024 utilization legend with matching series
  brushes, and per-chart Period selectors wired to the period-aware data.
- Lay out the Cost panel like Angular (pie + area stacked left, fuel chart large
  on the right) and refresh the detail via MarkForCheck so period changes apply
  immediately. Register IgbSelectModule.

…d tab fade

- Make every grid small (--ig-size-small) with 33px rows; shrink the make-logo
  and driver images to 22px so cell content no longer forces a taller row.
- Switch the make-logo cell from IgbAvatar to a plain img for exact sizing.
- Toolbar: keep the title on the left and push the Clear Sort action to the
  right next to the hiding/pinning/advanced-filtering tools; add a gated
  Clear Sort button that resets the grid sorting.
- Fade the detail tab content in on tab change (replaces a horizontal slide
  that reflowed the grid/chart content and flickered).

… and styling polish

- Extract the master-detail content into a VehicleDetailPanel child component so its
  own state changes re-render it directly; period selectors update the charts without
  forcing the grid to re-check, and the detail re-renders when async data arrives.
- Render the image/badge cells (driver photo, make logo, status, maintenance type) with
  native lit-html cell templates (BodyTemplateScript) instead of Blazor BodyTemplates.
  The grid recreated Blazor template DOM on every hover/scroll, reloading images and
  flickering; lit-html updates the cell in place. Mirrors the IgniteUI Web Components
  fleet sample, using the exact material-icons-extended icons.
- Lazy-render each detail tab's grid/chart on first open to keep the panel responsive.
- Compact every grid to small rows; toolbar title on the left with a Clear Sort action
  on the right; auto-fit the Trip History and Maintenance grids to their content.
- Use the brighter primary color for the active tab so it is clearly visible.
- Remove the inline-SVG icon helper and unused RCL boilerplate; drop code comments.

…rdered host as the cost charts

… bordered card

Match the IgniteUI Web Components fleet sample: the Utilization tab is now a single
bordered card containing a large title, the legend stacked beneath it on the left, and
the chart below — instead of a title/legend header above a separately bordered chart.
The chart-host border stays on the cost charts only.

…adge in the driver cell

Show a light-green rounded "Current" badge next to the driver name on the first Trip
History row when the trip is ongoing (first row and End is "N/A"), mirroring the IgniteUI
Web Components fleet sample. Added in the native lit-html driver cell template so it does
not flicker on hover/scroll.

… and Indigo theme

- Convert the Sales sample to an IgbPivotGrid analytics dashboard matching the IgniteUI
  Web Components sales example: the sales.json dataset summarized as a cross-tab.
- Two switchable pivot presets (by Country & Brand, by Store) plus an IgbPivotDataSelector
  panel for runtime drag-and-drop reconfiguration of rows, columns, values and filters.
- Values aggregate Sales and the pre-computed Profit (Sale - Cost) with SUM and a
  SUM/AVG/COUNT/MIN/MAX dropdown; a date dimension groups periods into years and quarters.
- Apply the Indigo / Light theme scoped to the sales section (palette tokens overriding the
  host material theme - the same scoping pattern used for the fleet sample's dark theme).
- Expose Profit on the model so the grid can aggregate it; drop the live-update timer
  (too heavy for a pivot over the full dataset). Remove unused RCL boilerplate and suppress
  the unavoidable BL0005 from the documented pivot-configuration pattern.

…y 10% data sample

- Rework the layout to match the IgniteUI Web Components sales sample: a bordered toolbar with
  the header-surface background and bordered, gap-less pivot + data-selector containers.
- Temporarily sample every 10th record (~10%) so the pivot loads quickly while validating
  functionality; marked for removal before finalizing.

WIP: parked to revisit last (indigo grid-structure theme and data-loading strategy still open).

…cells and Bootstrap theme

- Rebuild the Financial Portfolio grid to match the IgniteUI Web Components finance sample:
  11 columns (symbol, asset, position, prices, daily change, market value, net profit/loss,
  allocation, holding period) with sorting, filtering, column hiding/pinning and multi-row selection.
- Render image/icon/bar cells via native lit-html BodyTemplateScript so the live 3s price
  updates do not flicker (the fleet-sample lesson): company-logo avatars, green/red profit and
  loss values with trending up/down icons, and an allocation progress bar.
- Fix the live updates for Blazor WebAssembly: replace System.Timers.Timer (does not fire
  reliably on the single WASM thread) with a PeriodicTimer loop, and assign a new data list
  reference each tick so the grid re-syncs the mutated rows.
- Apply the Bootstrap / Light theme scoped to the finance section; add HoldingPeriod to the
  model; remove unused RCL boilerplate.

…bar and exporter

- Replace the per-column filter row with the Web Components toolbar layout: the title and a
  "Filter by Asset" search bar with the hiding, pinning and Excel exporter actions.
- The search filters by Symbol or Asset (case-insensitive contains) via a client-side LINQ
  view bound to the grid, which keeps working through the live price updates.

… and match the toolbar layout

- Previously only the Bootstrap color *tokens* were scoped to the section, so the grid kept the
  host's Material *structure*. Scope the actual Bootstrap grid + component theme CSS to
  #finance-section (selectors prefixed; :root rescoped; @keyframes/@font-face/@import dropped so
  the host theme still provides them) so the toolbar buttons, inputs, checkboxes and grid chrome
  render as Bootstrap.
- Match the Web Components toolbar layout: title on the left, the "Filter by Asset" search bar on
  the right next to the hiding/pinning/exporter actions (the title/search live in portal wrappers,
  so flex-start + margin-left:auto on the search rather than space-between).
- Use the full "Average Cost/Share" column header.

…ut styling, remove section gap

- The IgbInput Input event does not fire on typing and ValueChanged is blur-only, so the search
  only updated on blur. Replace it with a native <input type="search"> bound via
  @Bind:event="oninput", so the grid filters on every keystroke.
- Style the search field to match the Bootstrap design: white field, gray border, rounded
  corners, blue focus ring and the native clear button.
- Drop the .finance-container padding that left a gap between the themed section and the grid.

…ocation bar

- The column widths summed to 109%, so the grid overflowed horizontally and the last column
  (Holding Period) was pushed off-screen. Reduce the widths to ~95% so every column, including
  Holding Period, fits within the grid without scrolling.
- Make the allocation progress bar noticeably thicker (12px, large size) to match the design.

… close the right gap

- The previous bar fix sized the igc-linear-progress host (12px), but its internal base/track/fill
  parts stayed fixed at 4px. Size those ::part elements directly so the bar is actually thick.
- Widen the Asset column so the data columns fill the grid width (~97.5%), removing the empty
  space that was left on the right edge.

…header/buttons, match WC grid sizing

Fleet sample:
- Remove the per-column filter row; keep the advanced-filtering toolbar dialog and button.
- Match the WC grid sizing: scope --ig-size-small to the grid (toolbar 44px), set the header
  sort icon to 15px (the grid otherwise renders it at the default 24px), row height to 32px, and
  use MinWidth-only columns (drop the percentage widths so they auto-distribute and fill the grid).
- Make the grid flush by dropping the .fleet-container 1rem padding.
- Match the WC toolbar title exactly: soft-gray #e0e0e0 (was near-white #fafafa) and left-aligned
  at the toolbar padding (hide the empty portaled title slot that pushed it ~16px right).

App shell (NavMenu):
- Re-render the nav on navigation (subscribe to NavigationManager.LocationChanged) so the active
  tab and the current-tab-info no longer go stale after switching samples.
- Use the exact per-sample title/description/theme/mode from the WC home view (fixes ERP and Sales,
  which were defaulting to the Bootstrap theme label).
- Fix the Download and Fullscreen buttons: IgbButton (Lite) exposes no click event, so wrap each in
  a span with @OnClick and add shell-interop.js (real document fullscreen; Download fetches the repo
  zip; View More opens the docs in a new tab).

…ales-dashboard-sample-blazor

…d data, Indigo theme, styled toolbar

- Map every sales.json record into PivotSalesDataItem via SalesDataService (no hand-written data);
  bundle a 10% sample (~1MB, every 10th record) locally and cache the deserialized list per session.
- Configure the pivot 1:1 with the WC sample: Country > Brand columns, Date (Year > Quarter) rows,
  Sales + Profit values, narrowed to the HM / HM Home brands in C# (the native dimension Filter does
  not apply in this build). Three switchable views: Brands separate / combined, Stores: Bulgaria.
- Scope the Indigo grid theme to #sales-section so the grid structure (filter chips, cells) is Indigo,
  not just the color tokens.
- Toolbar: replace the select with a filled-Indigo IgbDropdown button (white text, eye + caret icons)
  and an outlined gray Export-to-Excel pill (download icon); SVG icons registered at runtime.
- Use the pivot grid built-in IsLoading indicator (the WC loading widget).
- Shrink the data selector search input and enlarge/bolden its section headers via a shadow-piercing
  interop helper (they render inside the selector shadow root).

…id height to 162px

…blazor' into aahmedov/sales-dashboard-sample-blazor

…blazor' into aahmedov/financial-portfolio-sample-blazor

…blazor' into aahmedov/financial-portfolio-sample-blazor

…blazor' into aahmedov/sales-dashboard-sample-blazor

# Conflicts:
#	BlazorGridExamples/wwwroot/scripts/shell-interop.js

…red via IgbIcon

…blazor

feat(sales-dashboard-sample): WC-accurate pivot dashboard

…; fix Safari compat

- scope-css.js: rewrite to tokens-only extraction (no selector prefixing),
  remove negative lookbehind (Safari < 16.4 SyntaxError), fix dedup key to
  include both cssUrl and scopeSelector
- shell-interop.js: add webkitRequestFullscreen / webkitExitFullscreen fallbacks
  so the fullscreen button works in Safari
- FleetManagementComponent: remove static fleet-dark.css link, inject IJSRuntime,
  call scopeThemeToElement for dark Material tokens at runtime
- Delete samples/FleetManagement/wwwroot/styles/fleet-dark.css (66KB generated file)

…oElement

Replace sales-indigo.css (646KB) and sales-grid-theme.css (628KB) generated
token dumps with scopeThemeToElement calls scoped to #sales-section, matching
the same pattern used for the Fleet dark theme.

…ub.com/IgniteUI/blazor-grid-examples into aahmedov/financial-portfolio-sample-blazor

…inancial-portfolio-sample-blazor

# Conflicts:
#	BlazorGridExamples/Program.cs

Replace the hand-generated finance-theme.css (613KB Bootstrap grid+component dump
scoped to #finance-section) with scopeThemeToElement calls that scope the stock
Bootstrap light theme tokens to #finance-section at runtime -- same pattern as
Fleet (dark Material) and Sales (Indigo).

…ple-blazor' into aahmedov/financial-portfolio-sample-blazor

…, allocation bar

Align the Finance sample with the web-components reference (live + local
webcomponents-grid-examples/projects/finance-grid):
- toolbar title: Bootstrap system font, 16px, weight 400, muted gray (--ig-gray-600)
- "Filter by Asset" input + placeholder: 16px Bootstrap font, --ig-gray-700
- allocation linear-progress fill: Bootstrap primary blue (--ig-primary-500 / #0d6efd)

…arity)

Match the web-components layout where the dashboard fills the viewport and the
grid scrolls internally:
- body: overflow hidden so the page never shows its own vertical scrollbar
- demo-container: height 100vh
- finance grid: Height="100%" (fills the flex container) instead of calc(100vh - 110px)

…ection checkbox column

Further WC parity for the Finance sample:
- toolbar action buttons (hiding/pinning/export): Bootstrap primary blue (#0d6efd) instead of grey
- column headers: bold (700) solid dark, matching the WC bold black headers
- restore RowSelection=Multiple (dropped in the currency-formatting merge) so the
  row-selector checkbox column is shown, per the grid Selection docs

The outlined toolbar buttons (hiding/pinning/export) kept a grey border after the
foreground was switched to primary; set the border-color to the Bootstrap primary
too so the buttons fully match the WC reference.

…teUI.Blazor to 26.1.51

- scopeThemeToElement gains an opt-in `full` (3rd arg) mode that re-scopes a theme's
  ENTIRE ruleset (component rules + tokens) under the selector via the browser's own CSS
  parser (Safari-safe, no regex lookbehind), so scoped sections can match a theme at the
  component level (button states, checkbox shape, etc.). Default stays the lightweight
  tokens-only path, so existing samples are unaffected unless they opt in.
- Bump IgniteUI.Blazor 25.2.104 -> 26.1.51 across all projects.

…inancial-portfolio-sample-blazor

…ction

Opt into scopeThemeToElement's full mode (3rd arg) for the base + grid Bootstrap themes,
so the Finance grid's buttons (text/border/icon + hover), checkboxes (square) and headers
(bold) are driven by the real Bootstrap component theme instead of CSS patches. Removed the
now-redundant manual overrides from finance.css (button color/border, header weight, title
typography, allocation fill) -- the theme provides them, matching the WC sample 1:1.

body: overflow hidden so the page never shows its own scrollbar; demo-container: 100vh.
Samples fill the router area and grids scroll internally (matches the WC layout).

The "Fleet Management" title was display:none and would render dark-on-dark; show it in
the dark theme's light text colour.

- opt into full-scope Indigo theming so the pivot title, chips, checkboxes and data
  selector are component-level Indigo (not Material-with-indigo-palette)
- title via igx-grid-toolbar__title (14px/600 bold) instead of an oversized custom style
- pin the toolbar buttons to the WC look: contained Indigo pill with white text, neutral
  grey outlined pill, both flat (no elevation)
- data selector width 200px; sales-container fills the host (no viewport magic number)

…inancial-portfolio-sample-blazor

# Conflicts:
#	BlazorGridExamples/wwwroot/css/app.css